﻿<div class="login-form" [@routerTransition]>
    <div class="pb-13 pt-lg-0 pt-5">
        <h3 class="font-weight-bolder text-dark font-size-h4 font-size-h1-lg">
            {{ 'ChangePassword' | localize }}
        </h3>
    </div>

    <form #resetPassForm="ngForm" class="login-form form" method="post" (ngSubmit)="save()">
        <p>
            {{"PleaseEnterYourNewPassword" | localize}}
        </p>

        <div class="form-group">
            <input type="password" name="Password"
                class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
                [(ngModel)]="model.password" #Password="ngModel" placeholder="{{'Password' | localize}}"
                validateEqual="PasswordRepeat" reverse="true" [requireDigit]="passwordComplexitySetting.requireDigit"
                [requireLowercase]="passwordComplexitySetting.requireLowercase"
                [requireUppercase]="passwordComplexitySetting.requireUppercase"
                [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric"
                [requiredLength]="passwordComplexitySetting.requiredLength" required>
        </div>
        <div [hidden]="resetPassForm.form.valid || resetPassForm.form.pristine" class="form-group">
            <ul class="form-text text-danger" *ngIf="Password.errors">
                <li [hidden]="!Password.errors.requireDigit">{{"PasswordComplexity_RequireDigit_Hint" | localize}}</li>
                <li [hidden]="!Password.errors.requireLowercase">
                    {{"PasswordComplexity_RequireLowercase_Hint" | localize}}</li>
                <li [hidden]="!Password.errors.requireUppercase">
                    {{"PasswordComplexity_RequireUppercase_Hint" | localize}}</li>
                <li [hidden]="!Password.errors.requireNonAlphanumeric">
                    {{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}</li>
                <li [hidden]="!Password.errors.requiredLength">
                    {{"PasswordComplexity_RequiredLength_Hint" | localize:passwordComplexitySetting.requiredLength}}
                </li>
            </ul>
        </div>

        <div class="form-group">
            <input type="password" name="PasswordRepeat"
                class="form-control form-control-solid h-auto py-7 px-6 rounded-lg font-size-h6"
                [ngModel]="model.passwordRepeat" #PasswordRepeat="ngModel" placeholder="{{'PasswordRepeat' | localize}}"
                validateEqual="Password" reverse="false" [requireDigit]="passwordComplexitySetting.requireDigit"
                [requireLowercase]="passwordComplexitySetting.requireLowercase"
                [requireUppercase]="passwordComplexitySetting.requireUppercase"
                [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric"
                [requiredLength]="passwordComplexitySetting.requiredLength" required>
        </div>
        <div [hidden]="resetPassForm.form.valid || resetPassForm.form.pristine" class="form-group">
            <ul class="form-text text-danger" *ngIf="PasswordRepeat.errors">
                <li [hidden]="!PasswordRepeat.errors.requireDigit">{{"PasswordComplexity_RequireDigit_Hint" | localize}}
                </li>
                <li [hidden]="!PasswordRepeat.errors.requireLowercase">
                    {{"PasswordComplexity_RequireLowercase_Hint" | localize}}</li>
                <li [hidden]="!PasswordRepeat.errors.requireUppercase">
                    {{"PasswordComplexity_RequireUppercase_Hint" | localize}}</li>
                <li [hidden]="!PasswordRepeat.errors.requireNonAlphanumeric">
                    {{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}</li>
                <li [hidden]="!PasswordRepeat.errors.requiredLength">
                    {{"PasswordComplexity_RequiredLength_Hint" | localize:passwordComplexitySetting.requiredLength}}
                </li>
                <li [hidden]="PasswordRepeat.valid">{{"PasswordsDontMatch" | localize}}</li>
            </ul>
        </div>

        <div class="pb-lg-0 pb-5">
            <button [disabled]="saving" routerLink="/account/login" type="button"
                class="btn btn-light-primary font-weight-bolder font-size-h6 px-8 py-4 my-3"><i
                    class="fa fa-arrow-left"></i> {{"Back" | localize}}</button>
            <button type="submit" class="btn btn-primary font-weight-bolder font-size-h6 px-8 py-4 my-3 mr-3"
                [disabled]="!resetPassForm.form.valid" [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')"><i
                    class="fa fa-check"></i> {{"Submit" | localize}}</button>
        </div>

    </form>
</div>